<template>
  <div class="search-bar">
    <div class="search-content">
      <div class="search-item">
        <el-select v-model="searchType1" placeholder="请选择搜索类型" clearable>
          <el-option
            v-for="option in searchOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value">
            {{ option.label }}
          </el-option>
        </el-select>
        <el-input
          v-model="searchQuery1"
          placeholder="请输入搜索内容"
          clearable
          @clear="handleClear"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </div>
      
      <div class="search-item">
        <el-select v-model="searchType2" placeholder="请选择搜索类型" clearable>
          <el-option
            v-for="option in filteredSearchOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value">
            {{ option.label }}
          </el-option>
        </el-select>
        <el-input
          v-model="searchQuery2"
          placeholder="请输入搜索内容"
          clearable
          @clear="handleClear"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data() {
    return {
      searchType1: '',
      searchQuery1: '',
      searchType2: '',
      searchQuery2: '',
      searchOptions: [
        { label: '项目名称', value: 'project_name' },
        { label: '版本号', value: 'version' },
        { label: '用例名称', value: 'case_name' },
        { label: '优先级', value: 'priority' },
        { label: '创建时间', value: 'create_time' },
        { label: '是否通过', value: 'is_passed' }
      ]
    }
  },
  computed: {
    filteredSearchOptions() {
      if (!this.searchType1) {
        return this.searchOptions
      }
      return this.searchOptions.filter(option => option.value !== this.searchType1)
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', {
        type1: this.searchType1,
        query1: this.searchQuery1,
        type2: this.searchType2,
        query2: this.searchQuery2
      })
    },
    handleClear() {
      this.searchQuery1 = ''
      this.searchQuery2 = ''
      this.handleSearch()
    }
  },
  watch: {
    searchQuery1() {
      this.handleSearch()
    },
    searchQuery2() {
      this.handleSearch()
    },
    searchType1() {
      if (this.searchType2 === this.searchType1) {
        this.searchType2 = ''
        this.searchQuery2 = ''
      }
      this.handleSearch()
    },
    searchType2() {
      this.handleSearch()
    }
  }
}
</script>

<style scoped>
.search-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.search-content {
  width: 800px;
  display: flex;
  gap: 20px;
}

.search-item {
  display: flex;
  gap: 10px;
  flex: 1;
}

.search-item .el-select {
  width: 120px;
  flex-shrink: 0;
}

.search-item .el-input {
  width: 260px;
  flex-shrink: 0;
}

:deep(.el-input__inner),
:deep(.el-select .el-input__inner) {
  background-color: transparent !important;
  border: 1px solid #DCDFE6;
}

:deep(.el-select-dropdown) {
  background-color: #fff;
  border: 1px solid #DCDFE6;
}

:deep(.el-select-dropdown__item) {
  color: #606266;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: #f5f7fa;
}
</style> 